<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 响应式 : MVVM-数据驱动-vue监控数据变化，当数据发生变换时与之关联的DOM元素也会更新 -->
    <!-- 
        模板语法是为页面渲染提供特殊定义代码规则
            + 内容插值语法：向标页面直接填充内容的语法
                => 插值表达式语法 : 将vue管理的响应式仓库数据写入 {{ 变量名 }} 定义的页面位置
                => 插值表达的有效取值 : {{ Vue对象数据仓库变量|JS表达式|JS内置对象|符合JS规则匿名变量 }}
                    * Vue对象数据仓库变量
                    * JS表达式:通过js运算符完成结果计算的代码
                    * JS内置对象的取值调用:Math,JSON,Array,Object,Number,……
                => 插值表达式 {{  }} 内部的定义区域是一个 受限的JS代码运行区 【 受限：取值范围受限；受限：功能受限 】
    -->
    <div id="app">
        <p>msg={{ msg }}</p>
        <!-- <p>{{ info }}</p> -->
        <hr>
        <p>num1+num2={{ num1+num2 }}</p>
        <p>msg+end={{ msg+end }}</p>
        <p>flag1&&flag2={{ flag1&&flag2 }}</p>
        <p>flag3?num1:num2={{ flag3?num1:num2 }}</p>
        <p>str:{{ str }}</p>
        <!-- 数据类型转换表达式 -->
        <p>Boolean(str):{{ Boolean(str) }}</p>
        <p>arr:{{ arr }}</p>
        <!-- 对象取值表达式 -->
        <p>arr.length:{{ arr.length }}</p>
        <p>arr.join("<>"):{{ arr.join("<>") }}</p>
        <p>user:{{ user }}</p>
        <p>user.name:{{ user.name }}</p>
        <!-- 对象取值运算表达式 -->
        <p>arr[0]:{{ arr[0] }}</p>
        <p>arr[i]:{{ arr[i] }}</p>
        <p>user['name']:{{ user['name'] }}</p>
        <p>user[key]:{{ user[key] }}</p>
        <hr>
        <p>Math.PI:{{ Math.PI }}</p>
        <p>Array.isArray(arr):{{ Array.isArray( arr ) }}</p>
        <hr>
        <p>"%":{{ "%" }}</p>
        <p>num3以百分比的方式显示:{{ num3*100+"%" }}</p>
        <!-- <p>num3以百分比的方式显示:{{ if(falg3){ console.log(1) } }}</p> -->
        <p>我的名字叫tom,今年23岁==>{{ "我的名字叫"+user.name+",今年"+user.age+"岁" }}</p>
        <p>我的名字叫tom,今年23岁==>{{ `我的名字叫${user.name},今年${user.age}岁` }}</p>
        <p>我的名字叫tom,今年23岁==>我的名字叫{{user.name}},今年{{user.age}}岁</p>

    </div>
    <script type="module">
        
        import { createApp } from "../assets/vue3/vue.esm-browser.js"
        // let msg = "变量"
        const app = createApp({
            // data 叫做vue的响应式数据仓库
            data(){
                return {
                    msg:"msg变量",
                    end:".end",
                    num1:10,
                    num2:20,
                    flag1:true,
                    flag2:false,
                    flag3:false,
                    str:"123456",
                    arr:[1,2,3,4],
                    user:{
                        name:"tom",
                        age:23
                    },
                    i:0,
                    key:"name",
                    // 避免在仓库中以JS关键字作为属性名
                    // Array:"aaaaa",
                    num3:0.65
                }
            }
        })
        // mount 函数会返回管理对象 = vue实例对象
        let vm = app.mount("#app")
        // vm.info = "info数据"
        console.log(vm)
    </script>
</body>
</html>